<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传裁剪图片</title>
    <link rel="stylesheet" href="../dist/reset.css">
    <link rel="stylesheet" href="../dist/cropperImg.css">
    <!-- cropper自带的样式 -->
    <link rel="stylesheet" href="../dist/cropper.min.css">
</head>
<body>
    <button class="btn btn-demo" id="J-demo">上传图片</button>

    <div class="update-bg" id="J-update-wrapper">
        <input type="file" id="J-update-img-file" style="display: none">
        <div class="update-wrapper">
            <div class="update-header clearfix">
                <h3 class="text">上传图片</h3>
                <button class="btn close J-close">x</button>
            </div>
            <div class="update-main">
                <button class="btn update-btn J-update-btn">请选择图片</button>
                <div class="update-body clearfix">
                    <div class="body-left">
                        <img id="J-update-img" class="update-img" src="" alt="">
                    </div>
                    <div class="body-right">
                        <img src=""  class="user-header" id="J-update-user-header">
                    </div>
                </div>
                <div class="operation-wrapper clearfix">
                    <div class="operation-left">
                        <div class="left-container">
                            <button class="btn J-operation-btn" data-type="rote-left">向左旋转</button>
                            <button class="btn J-operation-btn" data-type="rote-right">向右旋转</button>
                        </div>
                        <div class="right-container">
                            <button class="btn J-operation-btn" data-type="scale-b">放大</button>
                            <button class="btn J-operation-btn" data-type="scale-s">缩小</button>
                        </div>
                    </div>
                    <div class="operation-right">
                        <button class="btn J-operation-save">保存图片</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <img src="" alt="" id="J-user-header-img">
    <script src="../dist/jquery.min.js"></script>
    <!-- cropper  -->
    <script src="../dist/cropper.min.js"></script>
    <script src="../dist/cropperImg.min.js"></script>
    <script>
        var update;
        $('#J-demo').click(function() {
            if (!update) {
                update = new UpdateCropper((base64url) => {
                    $('#J-user-header-img').attr('src', base64url);
                });
            }
            update.init();
        });
    </script>
</body>
</html>